
import React, { useState } from 'react'
import { Cascader, Button, Space, } from 'antd-mobile'
import './AddConference.css'
import { options } from './data'
function AddConference(props) {

    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState  ([])
    return (
        <div style={{padding:'0 10px'}}>
            <h3>添加会议</h3>
            <Space align='center'>
                <Button
                    onClick={() => {
                        setVisible(true)
                    }}
                >
                    <Cascader
                    options={options}
                    visible={visible}
                    onClose={() => {
                        setVisible(false)
                    }}
                    value={value}
                    onConfirm={setValue}
                    onSelect={(val, extend) => {
                        console.log('onSelect', val, extend.items)
                    }}
                >
                    {items => {
                        if (items.every(item => item === null)) {
                            return '未选择'
                        } else {
                            return items.map(item => item?.label ?? '未选择').join('-')
                        }
                    }}
                </Cascader>
                </Button>
                
            </Space>

             <Button block color='primary' size='large' className='save-btn'>
          保存
        </Button>
        </div>
    )
}
export default AddConference